/* 
  列表页：
    1.当访问list页面时，直接给后台发送数据
    2.后台处理完毕后，返回响应结果
    3.前端解析完响应结果之后，把数据渲染到页面中
    4.使用分页器来进行分页
*/
// 获取操作对象
var div1 = document.querySelector(".pagination1");
//获取存放所有内容的盒子
var rowDiv = document.querySelector(".row");
var zhubao_list;
(async function () {
  // 获取所有数据就不需要传参
  var data = await PromiseAjax({
    url: "../php/list.php",
  });
  // console.log(data);
  // 将前端获取到的数据转为数组对象
  // json.parse()
  // JSON.stringify()
  data = eval("(" + data + ")");
  console.log(data);
  // 创建分页器的实例化对象
  new Pagination(div1, {
    pageInfo: {
      pagenum: 1,
      pagesize: 10,
      totalsize: data.length,
      totalpage: Math.ceil(data.length / 10),
    },
    textInfo: {
      first: "首页",
      prev: "上一页",
      next: "下一页",
      last: "尾页",
    },
    // 获取当前页码,分页器中信息操作完毕后，调用回调函数，这样才能修改页码
    cb(m) {
      //   console.log(m);
      // 获取一页显示的数据
      //当前页码是1,也就是slice(0,10),包含前一个下标，但是不包含后一个下标，也就是0-9
      var ar1 = data.slice((m - 1) * 10, m * 10);
      // 创建拼接所有内容的字符串
      var str = "";
      //   console.log(ar1);
      // 渲染当前数组中所有数据
      // 此时的一条数据就是一个对象
      for (let i = 0; i < ar1.length; i++) {
        str += `
        <div class="zhubao-list fl" >
        <img src="${ar1[i].goods_small_logo}" alt="" class='big1' style:'width:230px;height:230px;'>
        <img src="${ar1[i].goods_small_logo}"  alt="" class
        ='small1' style:'width:36px;height:36px;'>
        <span class="price">${ar1[i].goods_price}</span>
        <p class="title">${ar1[i].goods_name}</p>
        <p class="words"><span>${ar1[i].cat_id}</span><span>${ar1[i].cat_one_id}</span><span>${ar1[i].cat_two_id}</span><span>${ar1[i].cat_three_id}</span><span>心形</span></p>
        <p class="con"><em>100+</em>条评价</p>
        <p class="shop-name">溢爱珠宝旗舰店<img src="../images/shop.png" alt=""></p>
        <p class="quan"><span style="margin-left: 0;">券1800-200</span><span>券1000-80</span></p>
      </div>
        `;
      }
      // 将拼接好的内容渲染到页面中
      rowDiv.innerHTML = str;
      //异步
      zhubao_list = document.querySelectorAll(".zhubao-list");
      for (let i = 0; i < zhubao_list.length; i++) {
        zhubao_list[i].onclick = function () {
          console.log(this.goods_id);
          location = `./detail.html?id=${ar1[i].goods_id}`;
        };
      }
    },
  });
})();
